<template>
	<view class="fui-wrap" :style="`padding-bottom:${safebottom}rpx;`">
		<block v-if="!error && step==1">
			<fui-sticky>
				<fui-notice-bar content="合并开票仅支持同个停车场，不同停车场请分批开票" height="88" size="26" single background="#edfefe" color="#333">
					<view class="fui-icon__box">
						<fui-icon name="notice-fill" :size="40" color="#ea3030"></fui-icon>
					</view>
				</fui-notice-bar>
			</fui-sticky>
			<fui-list>
				<fui-list-cell :background="!parking_id || (parking_id && item.parking_id==parking_id)?'#fff':'#f0f0f0'" :highlight="!parking_id || (parking_id && item.parking_id==parking_id)" :padding="['22rpx', '32rpx', '8rpx', '32rpx']" v-for="(item,index) in list" :key="index" @click="checkItem(item)">
					<view class="item">
						<fui-text :text="item.out_trade_no" color="#2d2d2d" :size="28" block></fui-text>
						<fui-tag :text="item.order_type_text"></fui-tag>
						<fui-text :text="item.pay_time" color="#2d2d2d" :size="28" block></fui-text>
						<fui-text :text="item.parking_title" color="#2d2d2d" :size="28" block></fui-text>
					</view>
					<view class="right">
						<fui-text :text="'￥'+item.pay_price" color="#eb3b18" :size="32" block fontWeight="800" style="margin-right: 20rpx;"></fui-text>
						<fui-checkbox @change="checkItem(item)" borderRadius="4rpx" value="1" :checked="item.checked"></fui-checkbox>	
					</view>
				</fui-list-cell>
			</fui-list>
			<view class="bottom-step1" :style="`height: ${safebottom}rpx;`">
				<view class="left">
					<fui-text :text="order" color="red" :size="28"></fui-text>
					<fui-text text="个订单，合计" color="#000" :size="28"></fui-text>
					<fui-text :text="total" color="red" :size="28"></fui-text>
					<fui-text text="元" color="#000" :size="28"></fui-text>
				</view>
				<view class="right" @click="goStep(2)">
					<fui-text text="下一步" color="#fff" :size="32"></fui-text>
				</view>
			</view>
			<fui-empty v-if="list.length===0" :src="`${baseUrl}assets/img/miniapp/empty.png`" title="暂无数据!" :marginTop="200"></fui-empty>
		</block>
		<block v-if="!error && step==2">
			<view class="order-pannel">
				<fui-text text="开票金额" color="#fff" :size="28"></fui-text>
				<view class="money">
					<fui-text text="￥" color="#fff" :size="28" fontWeight="800"></fui-text>
					<fui-text :text="total" color="#fff" :size="42" fontWeight="800"></fui-text>
				</view>
				<fui-text :text="`开票单位：${invoice_entity}`" color="#ececec" :size="28"></fui-text>
				<view class="step" @click="goStep(1)" v-if="!pay_id">
					<fui-text :text="`${order}个订单，上一步 > `" color="#fff" :size="24"></fui-text>
				</view>
			</view>
			<view class="write-pannel">
				<fui-tabs :tabs="['企业', '个人']" :center="true" :current="current" @change="changeTabs"></fui-tabs>
				<fui-form ref="form" :model="formData" :show="false">
					<view class="title">发票信息</view>
					<block v-if="current">
						<fui-form-item errorAlign="right" :padding="['0rpx','30rpx']" label="发票抬头" asterisk prop="name">
							<fui-input :borderBottom="false" :clearable="true" placeholder="请填写个人姓名或发票抬头名称" v-model="formData.name"></fui-input>
						</fui-form-item>
					</block>
					<block v-else>
						<fui-form-item errorAlign="right" :padding="['0rpx','30rpx']" label="发票抬头" asterisk prop="name">
							<fui-input :borderBottom="false" :clearable="true" placeholder="请填写企业名称" v-model="formData.name"></fui-input>
						</fui-form-item>
						<fui-form-item errorAlign="right" :padding="['0rpx','30rpx']" label="企业税号" asterisk prop="code">
							<fui-input :borderBottom="false" :clearable="true" placeholder="请填写纳税人识别号" v-model="formData.code"></fui-input>
						</fui-form-item>
						<fui-form-item :padding="['0rpx','30rpx']" label="单位地址" prop="address">
							<fui-input :borderBottom="false" :clearable="true" placeholder="选填" v-model="formData.address"></fui-input>
						</fui-form-item>
						<fui-form-item :padding="['0rpx','30rpx']" label="电话号码" prop="phone">
							<fui-input :borderBottom="false" :clearable="true" placeholder="选填" v-model="formData.phone"></fui-input>
						</fui-form-item>
						<fui-form-item :padding="['0rpx','30rpx']" label="开户银行" prop="bank">
							<fui-input :borderBottom="false" :clearable="true" placeholder="选填" v-model="formData.bank"></fui-input>
						</fui-form-item>
						<fui-form-item :padding="['0rpx','30rpx']" label="银行账号" prop="bank_account">
							<fui-input :borderBottom="false" :clearable="true" placeholder="选填" v-model="formData.bank_account"></fui-input>
						</fui-form-item>
					</block>
					<view class="title">收票人信息</view>
					<fui-form-item errorAlign="right" :padding="['0rpx','30rpx']" label="手机号码" asterisk prop="mobile">
						<fui-input :borderBottom="false" :clearable="true" placeholder="开票失败时可以联系到您" v-model="formData.mobile"></fui-input>
					</fui-form-item>
					<fui-form-item errorAlign="right" :padding="['0rpx','30rpx']" label="电子邮箱" asterisk prop="email">
						<fui-input :borderBottom="false" :clearable="true"  placeholder="用于接收发票" v-model="formData.email"></fui-input>
					</fui-form-item>
				</fui-form>
			</view>
			<view class="bottom-step2" :style="`height: ${safebottom}rpx;`">
				<view class="box">
					<fui-button :disabled="disabledButton" @click="postInvoice" text="提交" :size="32"  height="80rpx"></fui-button>
				</view>
			</view>
		</block>
		<block v-if="error">
			<view style="padding-top: 220rpx;">
				<fui-result type="fail" title="操作失败" :descr="error">
					<fui-button v-if="pay_id" @click="$reLaunch('index/index')" width="400rpx" height="84rpx" text="返回首页" type="success" bold :margin="['48rpx','0','24rpx']"></fui-button>
					<fui-button v-else @click="error='';" width="400rpx" height="84rpx" text="返回" type="success" bold :margin="['48rpx','0','24rpx']"></fui-button>
				</fui-result>
			</view>
		</block>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import {parseNumber} from '@/utils/util.js'
	export default {
		data() {
			return {
				baseUrl:baseUrl,
				pay_id:'',
				list:[],
				page:1,
				endData:false,
				parking_id:'',
				parking_phone:'',
				invoice_type:'',
				invoice_entity:'',
				total:0,
				order:0,
				step:1,
				error:'',
				current:0,
				formData:{
					name:'',
					code:'',
					address:'',
					phone:'',
					bank:'',
					bank_account:'',
					email:'',
					mobile:''
				},
				safebottom:0,
				disabledButton:false
			}
		},
		onLoad(e) {
			this.pay_id=e.pay_id || '';
			this.getList();	
			let that=this;
			uni.getSystemInfo({
			  success: function (info) {
				that.safebottom=info.safeAreaInsets.bottom+100;
			  }
			});
			let invoice=uni.getStorageSync('invoice') || '';
			if(invoice){
				this.formData=invoice;
			}
		},
		onReachBottom() {
			if(this.step==2){
				return;
			}
			this.getList();
		},
		onPullDownRefresh() {
			this.list=[];
			this.page=1;
			this.endData=false;
			this.getList(function(){
				uni.stopPullDownRefresh();
			});
		},
		methods: {
			...methods,
			changeTabs:function(e){
				this.current=e.index;
			},
			goStep:function(step){
				if(this.order===0){
					this.$msg('没有开票订单');
					return;
				}
				if(this.invoice_type=='handle'){
					this.error=`该停车场不支持电子发票，请联系管理员开取手撕发票，联系电话：${this.parking_phone}`;
					return;
				}
				this.step=step;
			},
			checkItem:function(item){
				if(this.parking_id && item.parking_id!=this.parking_id){
					return;
				}
				item.checked=!item.checked;
				this.countOrder();
			},
			countOrder:function(){
				let order=0;
				let total=0;
				let parking_id='';
				let invoice_entity='';
				let invoice_type='';
				let parking_phone='';
				for(let i=0;i<this.list.length;i++){
					if(this.list[i].checked){
						order++;
						total+=Number(this.list[i].pay_price);
						parking_id=this.list[i].parking_id;
						invoice_entity=this.list[i].invoice_entity;
						parking_phone=this.list[i].parking_phone;
						invoice_type=this.list[i].invoice_type;
					}
				}
				this.parking_id=parking_id;
				this.invoice_entity=invoice_entity;
				this.parking_phone=parking_phone;
				this.invoice_type=invoice_type;
				this.order=order;
				this.total=parseNumber(total);
			},
			postInvoice:function(){
				this.disabledButton=true;
				let rules=[
					{
						name:'name',
						rule: ["required","minLength:2","maxLength:40"],
						msg: ["请输入发票抬头","发票抬头有误","发票抬头有误"]
					},
					{
						name:'email',
						rule: ["required","isEmail"],
						msg: ["请输入邮箱账号","邮箱账号有误"]
					},
					{
						name:'mobile',
						rule: ["required","isMobile"],
						msg: ["请输入手机号码","手机号码有误"]
					}
				];
				if(!this.current){
					rules.push({
						name:'code',
						rule: ["required","isEnOrNo","minLength:15","maxLength:20"],
						msg: ["请输入纳税人识别号","纳税人识别号有误","纳税人识别号有误","纳税人识别号有误"]
					});
				}
				this.$refs.form.validator(this.formData,rules, true).then(res => {
					if (res.isPassed) {
						let pay_id=[];
						for(let i=0;i<this.list.length;i++){
							if(this.list[i].checked){
								pay_id.push(this.list[i].id);
							}
						}
						this.$post('orders/apply-invoice',{
							...this.formData,
							parking_id:this.parking_id,
							pay_id:pay_id,
							invoice_type:this.current?'personal':'company'
						},true,true).then(res=>{
							uni.setStorageSync('invoice',this.formData);
							this.$redirectTo('index/invoice-list');
						}).catch(err=>{
							this.disabledButton=false;
						});
					}else{
						this.disabledButton=false;
					}
				}).catch(err => {
					this.disabledButton=false;
				})
			},
			getList:function(callback=false){
				if(this.endData){
					this.$msg('已经到底了');
					return;
				}
				this.$get('orders/invoice',{
					pay_id:this.pay_id,
					page:this.page
				},true).then(res=>{
					this.list=this.list.concat(res);
					this.page++;
					if(res.length<10){
						this.endData=true;
					}	
					if(callback){
						callback();
					}
					if(this.pay_id){
						if(res.length>0){
							this.checkItem(res[0]);
							this.goStep(2);
						}else{
							this.error=`没有可开的发票`;
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.fui-icon__box{
	padding: 0 20rpx;
}
.item{
	display: flex;
	flex-direction: column;
	height: 200rpx;
	justify-content: space-around;
}
.right{
	display: flex;
	align-items: center;
}
.bottom-step2{
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 9999;
	background-color: #fff;
	.box{
		width: 96%;
		margin: 10rpx auto;
	}
}
.bottom-step1{
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 9999;
	background-color: #fff;
	box-shadow: 0px 2px 10px #9d9d9d;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.left{
		padding-left: 30rpx;
	}
	.right{
		padding:0 50rpx;
		background-color: #43afe8;
		height: 100%;
	}
}
.order-pannel{
	width: 90%;
	margin: 20rpx auto;
	background:linear-gradient(to right, #55aaff,#c3c8ef,#749b9d);
	padding: 2%;
	border-radius: 8rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	height: 170rpx;
	position: relative;
	.step{
		position: absolute;
		top: 20rpx;
		right: 10rpx;
		border: 1px solid #fff;
		border-radius: 30rpx;
		padding: 4rpx 16rpx;
	}
}
.write-pannel{
	.title{
		padding: 20rpx;
	}
}
</style>